<template>

	<view>
		<view class="head">
			<view class="part1">
				<text style="margin-left: 15px;">账户余额</text><text class="money">￥1086.22</text><text class="get">立即提现></text>
			</view>
			<view class="part2">
				<text style="margin-left: 15px;">共享订单</text>
			</view>
		</view>
		<view class="findOrder">
			<input type="search" value="" class="search1" placeholder="搜索你的订单" />
			<input type="button" value="搜索" class="button1" disabled="disabled" />
		</view>
		<view class="paging" >
				<view class="paging1" @click="choose1">
				<text>全部</text>
				<view :class="show1?'span':'span1'" ></view>
				
				</view>	
				<view class="paging1" @click="choose2">
				<text>进行中</text>
				<view :class="show2?'span':'span1'" ></view>
				<span class="tops">1</span>
				</view>	
				<view class="paging1" @click="choose3">
				<text>未完成</text>
				<view :class="show3?'span':'span1'" ></view>
				<span class="tops" style="left: 500rpx;">1</span>
				</view>
				<view class="paging1" @click="choose4">
				<text>已入账</text>
				<view :class="show4?'span':'span1'" ></view>
				<span class="tops" style="left: 680rpx;">1</span>
				</view>
			
		</view>
		<view>
				<orderall v-if="show1" ></orderall>	
				<orderrun v-if="show2"></orderrun>
				<orderunfinish v-if="show3"></orderunfinish>
				<orderfinish v-if="show4"></orderfinish>
		</view>
	
	</view>
</template>

<script>
	import orderall from '../../components/orderall.vue'
	import orderfinish from '../../components/orderfinish.vue'
	import orderunfinish from '../../components/orderunfinish.vue'
	import orderrun from '../../components/orderrun.vue'
	export default {
		data() {
			return {
				show1:true,
				show2:false,
				show3:false,
				show4:false,
				stateList:[
					{id:1,comtent:"全部",mclass:"span",state:true,},
					{id:2,comtent:"进行中",mclass:"span1",state:false},
					{id:3,comtent:"未完成",mclass:"span1",state:false},
					{id:4,comtent:"已入账",mclass:"span1",state:false},
				],
				content:[{id:1,show:true},
				{id:1,show:true},
				{id:1,show:true},
				{id:1,show:true},]
			}
		},
		components:{
			orderall,
			orderfinish,
			orderunfinish,
			orderrun,
		},
		methods: {
			// choose(item,index,stateList,content){
			// 	this.stateList.forEach((a)=>{
			// 		a.mclass = 'span1'	
			// 		a.state = false;
					
			// 	})
			// 	item.mclass = 'span';
			// 	item.state = true
			
			// }
			choose1(){
				this.show1 = true;
				this.show2 = false;
				this.show3 = false;
				this.show4 = false;
			},
			choose2(){
				this.show1 = false;
				this.show2 = true;
				this.show3 = false;
				this.show4 = false;
			},
			choose3(){
				this.show1 = false;
				this.show2 = false;
				this.show3 = true;
				this.show4 = false;
			},
			choose4(){
				this.show1 = false;
				this.show2 = false;
				this.show3 = false;
				this.show4 = true;
			},
		}
	}
</script>

<style>
.head{
	width: 750rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;

}
.part1{
	width: 750rpx;
	height: 100rpx;
	display: flex;
	flex-direction: row;
	line-height: 100rpx;
	font-size: 36rpx;
	text-align: center;
	font-family: PingFangSC-regular;
}
.money{
	color: rgba(255, 109, 88, 100);
	font-size: 40rpx;
	font-family: PingFangSC-bold;
	margin-left: 240rpx;
	font-weight: 600;
}
.get{
	color: rgba(153, 153, 153, 100);
	font-size: 20rpx;
	text-align: left;
	font-family: PingFangSC-regular;
	margin-left: 20rpx;
}
.part2{
	width: 750rpx;
	height: 100rpx;
	color: rgba(68, 68, 68, 100);
	font-size: 36rpx;
	font-family: PingFangSC-regular;
	line-height: 120rpx;
}

.tops{
	position: absolute;
	left: 320rpx;
	top: 310rpx;
	width: 24rpx;
	height: 24rpx;
	border-radius: 66rpx;
	background-color: rgba(255, 109, 88, 100);
	color: rgba(255, 255, 255, 100);
	font-size: 20rpx;
	text-align: center;
	font-family: Arial;
	line-height: 30rpx;
}


.findOrder{
	width: 700rpx;
	height: 40rpx;
	margin: auto;
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}
.search1{
	width: 600rpx;
	height: 60rpx;
	border-radius: 10rpx;
	background-color: rgba(241, 242, 248, 100);
	color: rgba(136, 136, 136, 100);
	font-size: 28rpx;
	text-align: left;
	font-family: Microsoft Yahei;
}
.button1{
	width: 100rpx;
	height: 60rpx;
	border-radius: 0px 5px 5px 0px;
	background-color: rgba(34, 149, 255, 100);
	color: rgba(255, 255, 255, 100);
	font-size: 28rpx;
	text-align: center;
	font-family: Microsoft Yahei;
}
.paging{
	width: 750rpx;
	height: 80rpx;
	line-height: 40rpx;
	text-align: center;
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
}
.span{
	width: 34rpx;
	height: 10rpx;
	line-height: 40rpx;
	border-radius: 10rpx;
	background-color: rgba(34, 149, 255, 100);
	text-align: center;
	margin-left: 35rpx;
}
.span1{
	display: none;
}

.paging1{
	width: 100rpx;
	height: 40rpx;
	color: rgba(68, 68, 68, 100);
	font-size: 28rpx;
	text-align: center;
	font-family: PingFangSC-regular;
	margin-left: 60rpx;
	margin-right: 20rpx;
	margin-top: 40rpx;


}
.hint{
	top: -50rpx;
	left: 90rpx;
	width: 24rpx;
	height: 24rpx;
	border-radius: 66rpx;
	background-color: rgba(255, 109, 88, 100);
	color: rgba(255, 255, 255, 100);
	font-size: 20rpx;
	text-align: center;
	font-family: Arial;
	position: relative;
	line-height: 28rpx;
}


</style>
